<template>
    <div class="container">
        <van-nav-bar
            left-arrow
            @click-left="back"
        />
		<div class="healthLogo">
			<van-image
			    width="100"
			    height="100"
			    :src="require('../../assets/logo.png')"
			/>
		</div>
        <van-form>
            <van-cell-group inset>
                <van-field
                    v-model="phone"
                    name="phone"
                    placeholder="手机号"
                    :rules="[{ validator: validatorPhone, required: true, message: '请填写正确手机号' }]"
                />
                <van-field
                    v-model="password1"
                    type="password"
                    name="password1"
                    placeholder="密码"
                    :rules="[{ validator: validatorPass, required: true, message: '长度至少为8，至少含有一个字母和一个数字' }]"
                />
                 <van-field
                    v-model="password2"
                    type="password"
                    name="password2"
                    placeholder="确认密码"
                    :rules="[{ validator: truePass, required: true, message: '两次密码输入不一致' }]"
                />
            </van-cell-group>
            <div style="margin: 40px 60px 0px">
                <van-button round block type="success" color="#1365b7" @click='register'>注册</van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
	import { registerapi } from '../../request/api/loginApi.js'
	import { Toast } from "vant"
	
export default {
    name: "regist",
    data() {
        return {
            phone: "",
            password1: "",
            password2: ""
        }
    },
    methods: {
		// 手机号校验
		validatorPhone(val) {
			 return /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(val)
		},
		// 密码校验
		validatorPass(val) {
			return /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/.test(val)
		},
		// 确认密码
		truePass(val) {
			if (this.password1 !== val) {
				return false
			} else {
				return true
			}
		},
		// 点击注册
		register() {
			const userObj = {
				id: this.$uid(),
				phone: this.phone,
				password: this.password1
			}
			registerapi(userObj).then(res => {
				if (res.data) {
				    if (res.data.code == 0) {
						Toast.loading({
							duration: 0, // 持续展示 toast
						    message: res.msg + '正在跳转登陆...',
						    forbidClick: true,
						})
						setTimeout(() => {
						    // 手动清除 Toast
						    Toast.clear()
							this.$router.push({ name: 'login' })
						}, 1000)
						
				    }
				} else {
					Toast({
						message: res.msg,
						icon: 'fail',
					})
				}
			}).catch()
		},
        toLogin() {
            this.$router.push({name: 'login'})
        },
        back() {
            this.$router.push({ name: 'login' })
        }
    }
};
</script>

<style lang="scss" scoped>
.container {
    height: 100%;
    // background: url("@/assets/bg.png") no-repeat;
    // background-size: 100% 100%;
    position: relative;
     .van-nav-bar {
        background: transparent;
    }
	.healthLogo {
		margin-top: 10%;
		display: flex;
		justify-content: center;
	}
    .van-form {
        position: absolute;
        width: 100%;
        top: 55%;
        transform: translateY(-50%);
        .van-cell-group {
            background: transparent;
			padding: 0 16px;
        }
        .van-field {
            margin-top: 20px;
            border-radius: 100px;
        }
        .van-row {
            text-align: center;
            color: #555;
        }
    }   
}
.container::before {
    content: '';
    width: 100%;
    height: 100%;
    // background: url("~@/assets/bg.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    filter: blur(2px);
    // z-index: -1;
}
</style>